<!-- 
-------------------------------------------------
-------------------------------------------------
		CONTENT BELOW ARE FOR PROTOTYPING!!!
-------------------------------------------------
-------------------------------------------------
 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:hx="http://aliok.com.tr">
	<body>
		<ui:composition >
	
			<!-- even if not specified, tags below may define the global attributes: 
				accesskey classp contenteditable contextmenu dir draggable hidden
				id itemid itemprop itemref itemscope itemtype lang spellcheck style
				tabindex title
			and global event attributes:
				onabort	onblurp	oncanplay oncanplaythrough onchange onclick oncontextmenu ondblclick ondrag
				ondragend ondragenter ondragleave ondragover ondragstart ondrop	ondurationchange onemptied
				onended	onerror	onfocus	onformchange onforminput oninput oninvalid onkeydown onkeypress
				onkeyup onload onloadeddata onloadedmetadata onloadstart onmousedown onmousemove
				onmouseout onmouseover onmouseup onmousewheel onpause onplay onplaying onprogress 
				onratechange onreadystatechange onscroll onseeked onseeking onselect onshow onstalled
				onsubmit onsuspend ontimeupdate onvolumechange onwaiting
			 -->
	
			<!--
				REFS: 
					http://www.whatwg.org/specs/web-apps/current-work/#audio
					https://developer.mozilla.org/En/HTML/Element/Audio
				ATTRIBUTES:
					preload can be: 
						none: do not preload the media from the server
						metadata: fetch metadata (length, quality, etc.)
						auto: load the data from the server, even if user doesnt play it
					showControls: 
						true: browser's media controls are shown
						false: controls are not shown unless page author provides one explicitly
					notSupportedAction:
						useFlashFallback: a flash player can be used as a fallback
						stop: attribute notSupportedMessage is shown to user
						
					other attributes are straight forward
				CURRENT BROWSER SUPPORT:
					Firefox 3.5.8		supported
					Chrome 4.0			supported
					Opera 10.10			not supported
					IE 8.0				not supported
					Safari 4.0.4		not supported
				NOTES:
					hx:audio and hx:video can be merged. currently, only differences are poster, width and height attributes!
			-->
			<!-- ---------------------------------------usage 1 --------------------------------------------------- -->
			<hx:audio value="#{audioBean.someAudioFile}" preload="metadata" 
				autoplay="true" loop="true" showControls="true" 
				notSupportedAction="useFallback"/>
			
			<!-- expected HTML5 code for usage 1-->
			<audio src="someAddress/someFile.wav" preload="metadata" autoplay loop controls>
				<object type="SOME FALLBACK MECHANISM TO PLAY THE FILE (FLASH may be)" />
			</audio>
			
			<!-- ---------------------------------------usage 2 --------------------------------------------------- -->
			<hx:audio preload="none" 
				autoplay="false" loop="false" showControls="false"
				notSupportedAction="stop"
				notSupportedMessage="Your browser does not support HTML5 audio." >
				
				<hx:mediaSource value="#{audioBean.someAudioFile}" contentType="audio/ogg" codecs="flac">
				
				<!-- media attribute: just like the @media in CSS -->
				<hx:mediaSource value="http://someaddress/someFile.ogg" media="screen and (device-width: 800px)">
				<hx:mediaSource value="http://someaddress/someFile.ogg" media="3d-glasses">
			</hx:audio>
			
			
			
			
			
			
			<!-- expected HTML5 code for usage 2-->
			<audio preload="none">
				Your browser does not support HTML5 audio.
				<source src='someAddress/somefile.ogg' type='video/ogg; codecs="flac"' />
				<source src='http://someaddress/someFile.ogg' media="screen and (device-width: 800px)" />
				<source src='http://someaddress/someFile.ogg' media="3d-glasses"/>
			</audio>
			
			<!-- -----------------------usage 3 - with hx:mediaSources (mediaSourceS) ---------------------------- -->
			<hx:audio preload="none" 
				autoplay="false" loop="false" showControls="false"
				notSupportedAction="stop"
				notSupportedMessage="Your browser does not support HTML5 audio." >
				
				<hx:mediaSources value="#{audioBean.someFileList}" >
			</hx:audio>
			
			
			
			
			
			
			<!-- expected HTML5 code for usage 3-->
			<audio preload="none">
				Your browser does not support HTML5 audio.
				<source src='someAddress/somefile1.ogg' type='video/ogg; codecs="flac"' />
				<source src='someAddress/somefile2.mp4' type='video/mp4; codecs="mp4a.40.2"' media="tv"/>
				<source src='someAddress/somefile3.wav' media="screen"/>
			</audio>
			
		</ui:composition>
	</body>
</html>